<template>
	<view>
		<uvsticky offset-top="0">
			<view class="boxcss">
				<view class="txcss">粉丝总数</view>
				<view class="txt3"> {{all}} </view>
			</view>
		</uvsticky>
		<view class="inbox">
			<view class="duis" v-for="item in friendList" :key="item.id">
				<view class="dencss" @click="xiaji(item.id)">
					<image src="/static/image/user.png" mode="scaleToFill" class="imga1" v-if="item.imgurl==''||item.imgurl==null"></image>
					<image :src="imgurl+item.imgurl" mode="scaleToFill" class="imga1" v-else></image>
					<view class="t1">
						<text>{{item.name?item.name:'微信访客'}}</text>
						<text>{{item.create_date}}</text>
					</view>
				</view>
				<view class="nhucs" v-if="item.plus==0">
					<image src="/static/sjimg/pt.png" mode="widthFix" class="vicss"></image>
				</view>
				<view class="nhucs" v-if="item.plus==1">
					<image src="/static/sjimg/vip.png" mode="widthFix" class="vicss"></image>
				</view>
				<view class="nhucs" v-if="item.plus==2">
					<image src="/static/sjimg/svip.png" mode="widthFix" class="vicss"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { apiMyinvite } from '@/api/upapi.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';

	const friendList = ref([]);
	const all = ref(0);
	const imgurl = ref('https://h.foomi.cn:9009/files/upload/');

	// 个人信息
	const initData = async () => {
		const mervalue = uni.getStorageSync('xwmemberId');
		try {
			let res = await apiMyinvite({
				memberId: mervalue
			});
			if (res.data.result === 0) {
				friendList.value=res.data.object;
				all.value=res.data.object.length;
			}
		} catch (error) {}
	};
	
	onLoad(() => {
		initData();
	});
</script>

<style>
	page{
		/* background-color: #fff; */
	}
</style>
<style lang="scss" scoped>
	.boxcss{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(to left, #ffeaf0,  #ffd5de );
		border-radius: 0 0 30rpx 30rpx;
		padding:20rpx 30rpx;
		.txcss{
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			color: #313131;
		}
		.txt3{
			background-color: #ff4a82;
			color: #fff;
			padding: 6rpx 40rpx;
			border-radius: 40rpx;
			font-size: 26rpx;
			font-weight: bolder;
		}
	}
	.inbox{
		padding: 20rpx;
	}
	.duis {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		.imga1 {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: white;
		}
		
		
		.t1 {
			display: flex;
			flex-direction: column;
			margin-left: 10rpx;
		
			>text:first-child {
				margin-bottom: 5rpx;
				font-size: 28rpx;
			}
		
			>text:last-child {
				font-size: 22rpx;
				color: #ababab;
			}
		}
		.nhucs{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.vicss{
			width: 180rpx;
		}
	}
	.dencss{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.duis:last-child {
		border-bottom: 0;
	}
</style>